.rank_content {
  margin-bottom: 28px;
  width: 100vw;
  height: 1143px;
  background-image: url('@/assets/rankList/bg.png');
  background-size: 100% 100%;

  .refresh_icon {
    top: 72px;
    right: 53px;
    width: 20px;
    height: 20px;
    z-index: 100;

  }

  .refresh_rotate {
    animation: rotate 3s infinite linear;
  }


  @keyframes rotate{
    from{
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg);
    }
  }

  .rank_title {
    margin-top: 40px;
    width: 197px;
    height: 59px;
    background-image: url('@/assets/rankList/title.png');
    background-size: 100% 100%;
  }

  .one_rank {
    top: 11px;
    width: 319px;
    height: 322px;
    background-image: url('@/assets/rankList/oneBg.png');
    background-size: 100% 100%;

    .one_info {
      margin-top: 151px;
      margin-left: 110px;
      //width: 100px;
      //height: 100px;
      //background-color: orange;
    }

    .one_head {
      width: 42px;
      height: 42px;
      //border-radius: 9999px;
    }

    .name {
      margin-top: 7px;
      font-size: 11px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 13px;
    }

    .w_54 {
      width: 54px;
    }

    .TOP1 {
      margin-top: 5px;
      width: 100px;
      text-align: center;
      font-size: 11px;
      font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
      font-weight: 700;
      color: #ffffff;
      line-height: 13px;
    }
  }
  .TOP1 {
    margin-top: 5px;
    width: 100px;
    text-align: center;
    font-size: 11px;
    font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
    font-weight: 700;
    color: #ffffff;
    line-height: 13px;
  }
  .two_rank {
    top: 300px;
    left: 17px;
    width: 182px;
    height: 180px;
    background-image: url('@/assets/rankList/twoBg.png');
    background-size: 100% 100%;

    .two_head {
      margin-top: 57px;
    }

    .mr_15 {
      margin-right: 15px;
    }

    .head_picture {
      width: 32px;
      height: 32px;
      background-color: #383838;
    }

    .name {
      margin-top: 5px;
      font-size: 9px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #ffffff;
    }

    .w_54 {
      width: 53px;
    }

    .diff_value {
      margin-top: 3px;
      font-size: 9px;
      font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .three_rank {
    top: 304px;
    left: 189px;
    width: 182px;
    height: 182px;
    background-image: url('@/assets/rankList/threeBg.png');
    background-size: 100% 100%;

    .two_head {
      margin-top: 57px;
    }

    .mr_15 {
      margin-right: 15px;
    }

    .head_picture {
      width: 32px;
      height: 32px;
      background-color: #383838;
    }

    .name {
      margin-top: 5px;
      font-size: 9px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #ffffff;
    }

    .w_54 {
      width: 53px;
    }

    .diff_value {
      margin-top: 3px;
      font-size: 9px;
      font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .snow_img {
    margin-top: 390px;
    width: 348px;
    height: 28px;
    background-image: url('@/assets/homepage/cp/snow.png');
    background-size: 100% 100%;
  }

  .rank_box {
    transform: translateY(-8px);
  }

  .rank_list {
    width: 348px;
    height: 547px;
    overflow-y: scroll;
    background: #fef0ff;

    .rank_item {
      width: 348px;
      height: 78px;

      .rank {
        margin-top: 32px;
        margin-left: 22px;
        margin-right: 8px;
        width: 14px;
        text-align: center;
        font-size: 12px;
        font-family: AaHouDiHei-常规, AaHouDiHei;
        font-weight: normal;
        color: #f0c0ed;
      }

      .rank_head {
        margin-left: 20px;
        height: 44px;
      }

      .rank_head_img {
        width: 44px;
        height: 44px;
      }

      .head_portrait_box {
        top: 0;
        left: 0;
        //background-image: url('@/assets/test.png');
        //background-size: 100% 100%;
      }

      .head_portrait {
        width: 36px;
        height: 36px;
        border: 1px solid #e8d2ff;
        border-radius: 50%;
      }

      .rank_img_user {
        width: 32px;
        height: 32px;
      }

      .rank_one {
        top: 0;
        left: 0;
      }

      .rank_two {
        left: 27px;
      }

      .rank_img {
        margin-left: 16px;
      }

      .rank_name {
        width: 55px;
        text-align: center;
        font-size: 11px;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #362d41;
      }
    }

    .rank_bg {
      background: linear-gradient(180deg, #FCD4FF 0%, #FFCBE8 100%);

      .rank {
        font-size: 12px;
        font-family: AaHouDiHei-常规, AaHouDiHei;
        font-weight: normal;
        color: #FF66F5;
      }
    }

    .rank_value {
      margin-right: 20px;
      font-size: 12px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #fb83b5;
      line-height: 14px;
    }
  }
}

.text_over {
  //超出的文本隐藏
  //用省略号显示
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my_rank {
  width: 348px;
  height: 78px;
  background: linear-gradient(180deg, #fcd4ff 0%, #ffcbe8 100%);
  border-radius: 0 0 16px 16px;

  .no_cp {
    .title {
      margin-top: 30px;
      margin-left: 11px;
      width: 36px;
      height: 15px;
      font-size: 12px;
      color: #ff66f5;
      text-align: center;
      background-size: 100% 100%;
    }

    .not_cp {
      background-image: url('@/assets/rankList/noCpTitle.png');
    }

    .not_rank {
      background-image: url('@/assets/rankList/noInRank.png');
    }
  }

  .rank_head {
    margin-left: 20px;
    height: 44px;
  }

  .rank_head_img {
    width: 44px;
    height: 44px;
  }

  .head_portrait_box {
    top: 0;
    left: 0;
    //background-image: url('@/assets/test.png');
    //background-size: 100% 100%;
  }

  .head_portrait {
    width: 36px;
    height: 36px;
    border: 1px solid #e8d2ff;
    border-radius: 50%;
  }

  .rank_img_user {
    width: 32px;
    height: 32px;
  }

  .rank_one {
    top: 0;
    left: 0;
  }

  .rank_two {
    left: 27px;
  }

  .rank_img {
    margin-top: 14px;
    margin-left: 16px;
  }

  .rank_name {
    max-width: 55px;
    text-align: left;
    font-size: 11px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #362d41;
  }

  .rank_value {
    margin-top: 32px;
    margin-right: 20px;
    font-size: 12px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #fb83b5;
    line-height: 14px;
  }
}

.border_50 {
  border-radius: 50%;
}

.index_100 {
  z-index: 100;
}

.f_9 {
  font-size: 9px;
}

.mr_15 {
  margin-right: 15px;
}
